<template>
  <div :id="nameMap" style="width: 100%; height: 100%;border-radius:8px;"></div>
</template>

<script>
import AMap from 'AMap';

export default {
  name: 'deliveryMap',
  data() {
    return {};
  },
  props: {
    //解决一个页面有两个地图导致弹窗地图不显示
    nameMap: {
      type:String,
      default:'delivery_map'
    },
    path_list: {
      type: Array
    },
    center_path: {
      type: Array
    },
    is_custom: {
      type: Number
    },
    address_name: {
      type: String
    }
  },

  created() {
    // this.setMap();
  },
  watch: {
    path_list() {
      if(this.is_custom == 0) {
        this.setMap();
      }else if(this.is_custom == 1) {
        this.setMapDistrict();
      }
    }
  },
  mounted() {
    if(this.is_custom == 0) {
      this.setMap();
    }else if(this.is_custom == 1) {
      this.setMapDistrict();
    }
  },
  methods: {
    // 行政区搜索
    setMapDistrict() {
          //初始化地图对象，加载地图
      var map = new AMap.Map("delivery_map", {
          center: this.center_path,
          zoom: 12
      });
      AMap.plugin(["AMap.DistrictSearch"], function() {
        map.addControl(new AMap.DistrictSearch());
      });
      var district = null;
      var polygons=[];
      //加载行政区划插件
      if(!district){
          //实例化DistrictSearch
          var opts = {
              subdistrict: 0,   //获取边界不需要返回下级行政区
              extensions: 'all',  //返回行政区边界坐标组等具体信息
              level: 'district'  //查询行政级别为 市
          };
          district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      // district.setLevel(document.getElementById('level').value)
      district.search(this.address_name, function(status, result) {
          map.remove(polygons)//清除上次结果
          polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  var polygon = new AMap.Polygon({
                      path: bounds[i],
                      strokeColor: '#FF33FF',
                      strokeWeight: 6,
                      strokeOpacity: 0.2,
                      fillOpacity: 0.4,
                      fillColor: '#1791fc',
                      zIndex: 50
                  });
                  polygons.push(polygon);
              }
          }
          map.add(polygons)
          map.setFitView(polygons);//视口自适应
      });
    },
    setMap: function(p) {
      // let that = this;
      var map = new AMap.Map(this.nameMap, {
        center: this.center_path,
        zoom: 12
      });
      var marker = new AMap.Marker({
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        position: this.center_path
      });
      marker.setMap(map);
      var path = this.path_list;
      var polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#FF33FF',
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50
      });
      map.add(polygon);
      // 缩放地图到合适的视野级别
      map.setFitView([polygon]);

      // var polyEditor = new AMap.PolyEditor(map, polygon)

      // polyEditor.on('addnode', function(event) {
      //     log.info('触发事件：addnode')
      // })

      // polyEditor.on('adjust', function(event) {
      //     log.info('触发事件：adjust')
      // })

      // polyEditor.on('removenode', function(event) {
      //     log.info('触发事件：removenode')
      // })

      // polyEditor.on('end', function(event) {
      //     log.info('触发事件： end')
      //     // event.target 即为编辑后的多边形对象
      // })
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#delivery_map {
  .amap-icon {
    img {
      width: 30px;
    }
  }
}
</style>
<style>
.amap-icon img {
  width: 25px;
  height: 34px;
}
</style>
